<template lang="pug">
    div(class="emotion-list")
      tabs(:tabs="tabs")
        div(v-for="item in total", style="white-space: pre-wrap;")
          span(v-for="emotion in getEmotions(item)",@click="emotionSelected(emotion)",:key="emotion.name")
            img(:src="emotion.small_url", class="jb-emotion-item")
</template>

<script>
import emotions from "./emotion";

import Vue from "vue";
import Tabs from "vue-slide-tabs";

export default {
  name: "emotion-list",
  components: { tabs: Tabs },
  data() {
    return {
      emotions: emotions,
      page: { skipCount: 0, maxResultCount: 24 }
    };
  },
  computed: {
    /**表情分页总数**/
    total() {
      var emotionCount = this.emotions.length;
      var baseMath = Math.round(emotionCount / this.page.maxResultCount);
      var total =
        emotionCount % this.page.maxResultCount === 0 ? baseMath : baseMath + 1;
      var results = [];

      for (var i = 1; i < total; i++) {
        results.push(i);
      }
      return results;
    },
    tabs() {
      return this.total.map(index => {
        return { id: index };
      });
    }
  },
  methods: {
    getEmotions(page) {
      var start = (page - 1) * this.page.maxResultCount;
      var end = start + this.page.maxResultCount;
      return this.emotions.slice(start, end);
    },
    emotionSelected(emotion) {
      this.$emit("selected", emotion);
    }
  }
};
</script>

<style>
.emotion-list {
  padding-top: 20px;
  overflow: hidden;
}

.emotion-list span {
  width: 12.5%;
  display: inline-block;
  text-align: center;
}
span img.jb-emotion-item {
  width: 80%;
}
</style>
<style lang="less">
.emotion-list .tabs-titles {
  display: none;
}
</style>

